<div class="modal-header">
  <div class="modal-title">{{ i.orderSn }} 详情</div>
</div>
<nz-spin *ngIf="!i" class="modal-spin"></nz-spin>
<div sv-container *ngIf="overview">
  <sv-title>基础信息</sv-title>
  <sv label="订单编号">{{ overview['orderSn'] }}</sv>
  <sv label="支付方式">{{ overview['paymentType'] }}</sv>
  <sv label="结算方式">出仓结算</sv>
  <sv label="订单收入">{{ overview['netAmount'] && overview['cur'] ? overview['cur'] + overview['netAmount'] : '' }}</sv>
  <sv label="订单状态">
    <nz-tag [nzColor]="statusNotice[overview['status']]['color']">{{ statusNotice[overview['status']]['text'] }}</nz-tag>
  </sv>
  <sv label="剩余时间" *ngIf="overview['status'] == 8 || overview['status'] == 9 || overview['status'] == 10">
    <nz-countdown
      [nzValue]="deadline"
      [nzFormat]="'D 天 H 时 m 分 s 秒'"
      [nzValueStyle]="{ 'font-size': '12px', color: '#faad14' }"
    ></nz-countdown>
  </sv>
</div>
<nz-space></nz-space>
<div sv-container *ngIf="overview && overview['shipmentInfo']">
  <sv-title>物流信息</sv-title>
  <sv label="收件人">{{ overview['shipmentInfo']['receiverName'] }}</sv>
  <sv label="发货地区">{{ overview['deliverPlace'] }}</sv>
  <sv label="收货地区">{{ overview['shipmentInfo']['saleCountry'] }}</sv>
  <sv label="收货地址">{{ overview['shipmentInfo']['receiveAddress'] }}</sv>
  <sv label="物流单号">
    {{ overview['shipmentInfo']['shippingMethod'] ? [overview['shipmentInfo']['shippingMethod']] : '' }}
    {{ overview['shipmentInfo']['trackingNumber'] }}
    <a *ngIf="overview['shipmentInfo']['trackingNumber']">查看物流轨迹</a>
  </sv>
  <sv label="收货电话" *ngIf="isAdmin">{{ overview['shipmentInfo']['receivePhone'] }}</sv>
</div>
<nz-divider></nz-divider>
<nz-tabset>
  <nz-tab nzTitle="订单概览">
    <div sv-container *ngIf="itemOverview && itemOverview['orderInfo']">
      <sv-title>订单信息</sv-title>
      <sv label="下单时间">{{ itemOverview['orderInfo']['placedOrderAt'] | _date: 'yyyy-MM-dd HH:mm:ss' }}</sv>
      <sv label="支付时间">{{ itemOverview['orderInfo']['paymentAt'] | _date: 'yyyy-MM-dd HH:mm:ss' }}</sv>
      <sv label="库存匹配时间">{{ itemOverview['orderInfo']['shippedAt'] | _date: 'yyyy-MM-dd HH:mm:ss' }}</sv>
      <sv label="发货时间">{{ itemOverview['orderInfo']['readiedAt'] | _date: 'yyyy-MM-dd HH:mm:ss' }}</sv>
      <sv label="签收时间">{{ itemOverview['orderInfo']['signedAt'] | _date: 'yyyy-MM-dd HH:mm:ss' }}</sv>
    </div>
    <nz-space></nz-space>
    <ng-container *ngIf="itemOverview && itemOverview['skus']">
      <div sv-container *ngIf="itemOverview && itemOverview['skus']">
        <sv-title>订单明细</sv-title>
      </div>
      <nz-table #skuTable [nzData]="itemOverview['skus']" [nzShowPagination]="false">
        <thead>
          <tr>
            <th class="text-center">商品</th>
            <th class="text-center">数量</th>
            <th class="text-center">单价</th>
            <th class="text-center">商品小计</th>
            <th class="text-center">预期结算金额</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let data of skuTable.data">
            <td>
              <nz-comment>
                <nz-comment-content>
                  <ng-container>
                    <nz-image
                      [nzWidth]="140"
                      [nzHeight]="140"
                      style="float: left; padding-right: 10px"
                      nzSrc="{{ data['skuImageUrl'] }}"
                    ></nz-image>
                    <p>{{ data['itemTitle'] }}</p>
                    <p>{{ data['skuExtAttribute'] }}</p>
                    <p>Fordeal SKU: {{ data['skuId'] }}</p>
                    <p>商家SKU: {{ data['skuNo'] }}</p>
                    <p class="itemId">商品ID: {{ data['itemId'] }}</p>
                    <p class="itemNo">商品货号: {{ data['itemNo'] }}</p>
                    <p>
                      <nz-tag [nzColor]="'orange'">{{ data['overTime'] }}天</nz-tag>
                    </p>
                  </ng-container>
                </nz-comment-content>
              </nz-comment>
            </td>
            <td class="text-center">{{ data['totalQuantity'] }}</td>
            <td class="text-center">{{ itemOverview['cur'] }} {{ data['originPrice'] }}</td>
            <td class="text-center">{{ itemOverview['cur'] }} {{ data['finalPrice'] }}</td>
            <td class="text-center">
              {{ itemOverview['cur'] }} {{ data['settlePrice'] | number: '0.2-2' }}
              <i nz-icon nzType="question-circle"></i>
            </td>
          </tr>
          <tr>
            <td class="text-center"></td>
            <td class="text-center"></td>
            <td class="text-center"></td>
            <td class="text-center">合计</td>
            <td class="text-center">
              {{ itemOverview['cur'] }} {{ itemOverview['grandTotal'] }}
              <i nz-icon nzType="question-circle"></i>
            </td>
          </tr>
        </tbody>
      </nz-table>
    </ng-container>
  </nz-tab>
  <nz-tab nzTitle="结算历史">
    <div sv-container *ngIf="itemCurrent">
      <sv-title>订单信息</sv-title>
    </div>
    <nz-space></nz-space>
    <div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 24, xl: 48, xxl: 48 }">
      <div nz-col nzMd="4" nzSm="24" *ngIf="overview && overview['recoreInfoList']">
        <nz-timeline>
          <nz-timeline-item *ngFor="let data of overview['recoreInfoList']">
            <a
              class="ti"
              (click)="loadItemCurrent(itemCurrent['orderSn'], data['recordId'])"
              [id]="'ti_' + data['recordId']"
              [style]="data['recordId'] == 0 ? 'color:blue' : ''"
            >
              {{
                data['changedAt'] ? (data['changedAt'] | _date: 'yyyy-MM-dd') + '\n' + data['cur'] + '&nbsp;' + data['netAmount'] : '当前'
              }}
            </a>
          </nz-timeline-item>
        </nz-timeline>
      </div>
      <div nz-col nzMd="20" nzSm="24">
        <ng-container *ngIf="itemCurrent && itemCurrent['orderInfo']">
          <div sv-container>
            <sv-title>订单信息</sv-title>
            <sv label="发货时间">{{ itemCurrent['orderInfo']['shippedAt'] | _date: 'yyyy-MM-dd HH:mm:ss' }}</sv>
            <sv label="订单状态">
              <nz-tag [nzColor]="statusNotice[itemCurrent['status']]['color']">{{ statusNotice[itemCurrent['status']]['text'] }}</nz-tag>
            </sv>
            <sv label="签收时间">{{ itemCurrent['orderInfo']['signedAt'] | _date: 'yyyy-MM-dd HH:mm:ss' }}</sv>
          </div>
          <nz-space></nz-space>
        </ng-container>
        <ng-container *ngIf="itemCurrent && itemCurrent['settleInfo']">
          <div sv-container>
            <sv-title>结算信息</sv-title>
            <sv label="结算单号">{{ itemCurrent['settleInfo']['settlementNo'] }}</sv>
            <sv label="结算状态">{{ itemCurrent['settleInfo']['settlementStatus'] }}</sv>
            <sv label="结算时间">{{ itemCurrent['settleInfo']['settlementTime'] | _date: 'yyyy-MM-dd HH:mm:ss' }}</sv>
          </div>
          <nz-space></nz-space>
        </ng-container>
        <nz-table *ngIf="itemCurrent && itemCurrent['skus']" #cskuTable [nzData]="itemCurrent['skus']" [nzShowPagination]="false">
          <thead>
            <tr>
              <th class="text-center">商品</th>
              <th class="text-center">状态</th>
              <th class="text-center">数量</th>
              <th class="text-center">单价</th>
              <th class="text-center">商品小计</th>
              <th class="text-center">预期结算金额</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let data of cskuTable.data">
              <td>
                <nz-comment>
                  <nz-comment-content>
                    <ng-container>
                      <nz-image
                        [nzWidth]="80"
                        [nzHeight]="80"
                        style="float: left; padding-right: 10px"
                        nzSrc="{{ data['skuImageUrl'] }}"
                      ></nz-image>
                      <p>{{ data['itemTitle'] }}</p>
                      <p>{{ data['skuExtAttribute'] }}</p>
                      <p>Fordeal SKU: {{ data['skuId'] }}</p>
                      <p>商家SKU: {{ data['skuNo'] }}</p>
                      <p>
                        <nz-tag [nzColor]="'orange'">{{ data['overTime'] }}天</nz-tag>
                      </p>
                    </ng-container>
                  </nz-comment-content>
                </nz-comment>
              </td>
              <td class="text-center">
                <nz-tag [nzColor]="skuStatusNotice[itemCurrent['status']]['color']">
                  {{ skuStatusNotice[itemCurrent['status']]['text'] }}
                </nz-tag>
                <p>{{ skuStatusNotice[itemCurrent['status']]['notice'] }}</p>
              </td>
              <td class="text-center">{{ data['totalQuantity'] }}</td>
              <td class="text-center">{{ itemOverview['cur'] }} {{ data['originPrice'] }}</td>
              <td class="text-center">{{ itemOverview['cur'] }} {{ data['finalPrice'] }}</td>
              <td class="text-center">
                <ng-container *ngIf="itemCurrent['status'] == 3 || itemCurrent['status'] == 5">
                  {{ itemOverview['cur'] }} {{ data['settlePrice'] | number: '0.2-2' }}
                  <i nz-icon nzType="question-circle"></i>
                </ng-container>
                <ng-container *ngIf="itemCurrent['status'] != 3 && itemCurrent['status'] != 5"> -- </ng-container>
              </td>
            </tr>
            <tr>
              <td class="text-center"></td>
              <td class="text-center"></td>
              <td class="text-center"></td>
              <td class="text-center"></td>
              <td class="text-center">合计</td>
              <td class="text-center">
                <ng-container *ngIf="itemCurrent['status'] == 3 || itemCurrent['status'] == 5">
                  {{ itemCurrent['cur'] }} {{ itemCurrent['grandTotal'] }}
                  <i nz-icon nzType="question-circle"></i>
                </ng-container>
                <ng-container *ngIf="itemCurrent['status'] != 3 && itemCurrent['status'] != 5"> -- </ng-container>
              </td>
            </tr>
          </tbody>
        </nz-table>
      </div>
    </div>
  </nz-tab>
</nz-tabset>

<div class="modal-footer">
  <button nz-button type="button" (click)="close()">关闭</button>
</div>
